.container{
    display: grid;
    /* display: inline-grid; */
    /* width: 100px; */
    /* grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px; */
    /* grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 33.33% 33.33% 33.33%; */
    /* grid-template-columns: repeat(3, 200px);
    grid-template-rows: repeat(3, 200px); */
    /* grid-template-columns: repeat(3, 30%);
    grid-template-rows: repeat(3, 30%); */
    /* grid-template-columns: repeat(3, 100px 20px 80px); */
    /* grid-template-columns: repeat(auto-fill, 90px); */
    /* grid-template-columns: 250px 1fr 1fr; */
    /* grid-template-columns: 2fr 1fr minmax(100px, 1fr); */
    /* grid-template-columns: 2fr 1fr minmax(100px, 300px); */
    /* grid-template-columns: 200px 200px minmax(100px, 300px); */
    /* grid-template-columns: 200px auto 100px */
    /* grid-template-columns: 70% 30%; */
    /* grid-template-columns: repeat(12, 1fr); */

    /* grid-row-gap: 20px;
    grid-column-gap: 20px; */
    /* grid-gap: 20px 10px; */
    /* grid-gap: 20px; */

        /*      grid-template-areas属性的练习~未完成呢         */
    grid-template-columns: repeat(3,200px);
    grid-template-rows: repeat(3,200px);
    grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
    /* justify-items: center;
    align-items: center; */
    /* place-items: end; */
    /* justify-content:  end  */
    /* grid-auto-flow: row; */
    /* grid-auto-rows: 200px;  */

}
.item1{
    background-color: blue;
    text-align: center;
    font-size: 80px;
    /* grid-column-start: 2;
    grid-column-end: 4; */
    /* grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4; */
    /* grid-column-start: a;
    grid-column-end: c;
    grid-row-start: e;
    grid-row-end: h; */
    /* grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3; */
    /* grid-column: 1 / span 3;
    grid-row: 1 / span 2; */
    /* grid-column: 1;
    grid-row: 1; */
    /* grid-area: e; */
}
.item2{
    background-color: red;
    text-align: center;
    font-size: 80px;
}
.item3{
    background-color: orchid;
    text-align: center;
    font-size: 80px;
}
.item4{
    background-color: green;
    text-align: center;
    font-size: 80px;
}
.item5{
    background-color: yellow;
    text-align: center;
    font-size: 80px;
}
.item6{
    background-color: orangered;
    text-align: center;
    font-size: 80px;
}
.item7{
    background-color: pink;
    text-align: center;
    font-size: 80px;
}
.item8{
    background-color: sienna;
    text-align: center;
    font-size: 80px;
    grid-row: 4 / 5;
    grid-column: 2;
}
.item9{
    background-color: indigo;
    text-align: center;
    font-size: 80px;
    grid-row: 5 / 6;
    grid-column: 3;
}
